<template>
    <div class="app-container">
        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
            <el-form-item label="设备名称" prop="deviceMac">
                <el-input v-model="queryParams.deviceName" clearable placeholder="请输入设备名称" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-button icon="el-icon-plus" size="mini" style="float: right; margin-top: 5px" type="primary" @click="handleAdd">新增</el-button>
        </el-form>

        <el-table :border="false" v-loading="loading" :data="bDeviceZtBindList" @selection-change="handleSelectionChange">
            <el-table-column align="center" label="设备名称" prop="deviceName" />
            <el-table-column align="center" label="所在地" prop="installationAddress" />
            <el-table-column align="center" label="备注" prop="remark" />
            <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                <template slot-scope="scope">
                    <el-button icon="el-icon-delete" size="mini" type="text" @click="handleDelete(scope.row)">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :close-on-click-modal="false" :visible.sync="deviceDialog" append-to-body custom-class="rc-dialog-01" title="设备管理">
            <Device ref="device" />
            <span slot="footer" class="dialog-footer">
                <el-button @click="deviceDialog = false">取 消</el-button>
                <el-button type="primary" @click="selectDevice">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import Device from './device';
import request from '@/utils/request';

export default {
    components: {
        Pagination,
        Device,
    },
    name: 'BDeviceZtBind',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 云组态组件关联表格数据
            bDeviceZtBindList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                deviceName: null,
                ztGuid: null,
            },
            deviceDialog: false,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        selectDevice() {
            this.deviceDialog = false;
            let selectData = this.$refs.device.selectRowDataClick();
            // console.log("选中的设备记录",selectData);
            selectData.forEach((element) => {
                this.saveBind(element.deviceMac);
            });
        },
        saveBind(deviceMac) {
            let data = {
                deviceMac: deviceMac,
                ztGuid: this.$route.query.guid,
            };
            let url = '/zutai/bDeviceZtBind';
            request({
                url: url,
                method: 'post',
                data: data,
            })
                .then((res) => {
                    this.getList();
                })
                .catch((error) => {
                    // console.log(error)
                    this.getList();
                });
        },
        /** 查询云组态组件关联列表 */
        getList() {
            this.loading = true;
            let url = '/zutai/bDeviceZtBind/getDeviceBind';
            let param = {
                ztGuid: this.$route.query.guid,
                deviceName: this.queryParams.deviceName,
            };
            request({
                url: url,
                method: 'get',
                params: param,
            })
                .then((res) => {
                    // console.log('获取成功!',res);
                    if (res.code == 200) {
                        this.bDeviceZtBindList = res.rows;
                        this.total = res.total;
                    }
                    this.loading = false;
                })
                .catch((error) => {
                    // console.log(error)
                    this.loading = false;
                });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.deviceName = '';
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.deviceDialog = true;
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            let that = this;
            this.$confirm('您是否确认删除此关联设备').then(function () {
                let url = '/zutai/bDeviceZtBind/' + ids;
                request({
                    url: url,
                    method: 'delete',
                })
                    .then((res) => {
                        that.getList();
                    })
                    .catch((error) => {
                        // console.log(error)
                        that.getList();
                    });
            });
        },
    },
};
</script>

<style>
.rc-dialog-01 {
    min-width: 760px;
}
</style>
